<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>14利用canvas绘制弧线</title>
</head>
<body>
    <canvas id="oCanvas" width=500 height=700 style="border:2px solid black"></canvas>
    
</body>
<script>
    // 1.通过id获取canvas对象
    var canvas = document.getElementById("oCanvas");
    // 2.通过canvas对象获取2d画笔对象
    var ctx = canvas.getContext('2d');
    // 3.通过画笔对象绘图


    // arcTo(x1,y1,x2,y2,radius)

    ctx.beginPath();

    ctx.lineWidth=2;
    ctx.strokeStyle="blue";

    ctx.translate(100,100);
    // 绘制起始点
    ctx.moveTo(50,50);
    // 绘制终止点（当前端点） 
    ctx.lineTo(150,50);
    // 绘制弧线  端点1 端点2 弧度      当前端点和端点一的x和y的最短距离 做圆弧的半径
    ctx.arcTo(200,50,200,100,15);
    ctx.lineTo(200,200);
    ctx.arcTo(200,250,150,250,50);
    ctx.lineTo(50,250);
    ctx.arcTo(0,250,0,200,50);
    ctx.lineTo(0,100);
    ctx.arcTo(0,50,50,50,50);

    var image = new Image();
    image.src="../images/2.jpg";
    image.onload=function(){
        ctx.drawImage(image,-50,300,400,200);
    }

    ctx.stroke();
</script>
</html>